<template>
  <div class="app-container">
    <!-- 搜索条件 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="user.username" placeholder="请输入用户名" clearable @clear="search()"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="user.age" placeholder="请输入年龄" clearable @clear="search()"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="page = 1;search();">查询</el-button>
        <el-button type="success" icon="el-icon-circle-plus-outline" @click="dialogFormVisible=true;title='添加用户'">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="userList" style="width: 100%">
      <el-table-column prop="id" label="用户id"> </el-table-column>
      <el-table-column prop="username" label="用户姓名"> </el-table-column>
      <el-table-column prop="age" label="用户年龄"> </el-table-column>
      <el-table-column label="成年/未成年">
        <!-- 自定义渲染 -->
        <template slot-scope="scope">
          <div>
            {{ scope.row.age >= 18 ? "成年人" : "未成年人" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template  slot-scope="scope">
          <div>
            <el-button type="success" icon="el-icon-edit" size="small" @click="update(scope.row)">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 添加用户模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form>
        <el-form-item label="用户名" label-width="100px">
          <el-input autocomplete="off" v-model="entity.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="100px">
          <el-input autocomplete="off" v-model="entity.password"></el-input>
        </el-form-item>
        <el-form-item label="年龄" label-width="100px">
          <el-input autocomplete="off" v-model="entity.age"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入axios
import axios from "axios";
//导入api
import { searchList,saveUser,updateUser,delUser } from "@/api/user";

export default {
  data() {
    return {
      user: {},
      entity:{},//添加修改时的user
      userList: [],
      pages: 0, //总页数
      page: 1, //当前页是第几页
      size: 5, //每页显示几行
      total: 0, //数据库查询的总记录数
      dialogFormVisible: false,
      title:"",
    };
  },
  methods: {
    //跟后端交互查询后端数据
    search() {
      searchList(this.user, this.page, this.size).then((res) => {
        this.userList = res.data;

        this.pages = res.pages;

        this.total = res.total;
      });
    },
    //监听当前页的变化
    handleCurrentChange(pageNow) {
      this.page = pageNow;
      this.search();
    },
    //监听每页显示条数的变化
    handleSizeChange(size) {
      this.size = size;
      this.search();
    },
    //添加用户
    addUser(){
        console.log(this.entity);

        if(this.entity.id){
          
          

        }else{
          //与后端交互进行添加
        saveUser(this.entity).then(res=>{
          console.log(res);
          if(res.success){
            //添加成功提示
            this.$notify({
            title: '成功',
            message:res.msg,
            type: 'success',
            duration:1500
          }); 
          }
            //添加成功将模态框关闭
            this.dialogFormVisible=false;
            //添加成功重新搜索
            this.search();
        }) 
        }
          
    },
    //修改用户
    update(user) {
      
        this.title="修改用户";
        this.entity=user;
        this.dialogFormVisible=true;
        updateUser(this.entity).then(res=>{
          console.log(res.msg);
        })
        
        

    },
    //删除用户
    del(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(function(){
                //与服务端交互，调用服务端的删除api
                delUser(id)
                alert("del"+uid)
            }).catch();
    },
     
    

  },
  created() {
    this.search();
  },
};
</script>